<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>阻止事件传播</title>
        <style>
            div {
                border: 1px solid blue ;
                margin: 100px ;
            }

            .middle {
                border-color: red ;
            }

            .inner{
                height: 100px ;
            }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="middle">
                <div class="inner"></div>
            </div>
        </div>

        <script type="text/javascript">
            ( function(){
                let outer = document.querySelector( '.outer' );
                let middle = document.querySelector( '.middle' );
                let inner = document.querySelector( '.inner' );

                const type = 'click' ;

                const listener = function( e ){
                    console.log( this , e.target );
                    if( this === middle ) {
                        e.stopPropagation(); // 阻止事件传播
                    }
                }

                outer.addEventListener( type , listener , false );
                middle.addEventListener( type , listener , false );
                inner.addEventListener( type , listener , false );
            } )();
        </script>
        
    </body>
</html>